{% extends "IfmiaAppBundle::layout.html.twig" %}

{% block title %}
	Liste sessions - {{ parent() }}
{% endblock %}


{% block app_body %}

<div id="alertMessage" style="display: none; width: 600px; height: 50px; background-color: blue;">
<p></p>
</div>

<div id="stateMenu">
	<input type="radio" name="etatSession" value="planifiee"> Session Planifiée
	<input type="radio" name="etatSession" value="validee"> Session Validée
	<input type="radio" name="etatSession" value="annulee"> Session Annulée
	<input type="radio" name="etatSession" value="tous" checked="checked"> Toutes les Sessions
</div>
<!-- ---------------------------------- -->

<h3>Liste des sessions</h3>
	
	<table id="_list" class="table table-bordered">
	<thead>
		<tr>
	  	<th></th>
	    <th>Code Session</th> 
	    <th>Nombre des Heures</th>
	    <th>Date Debut</th>
	    <th>Date Fin</th>
	    <th>Intitule Formation</th>
	    <th>Type</th>
	  </tr>
  	</thead>
  	<tbody>
	{% for session in sessions  %}
	  <tr>
	  	<td><input id="{{ session.id }}" class="_select" type="checkbox"></td>
	  	<td><a href="#">{{ session.CodeSession }}</a></td>
	    <td>{{session.NombreHeureSession  }}</td>
	    <td>{{ session.DateDebutSession|date('d-m-Y') }}</td>
	    <td>{{ session.DateFinSession|date('d-m-Y') }}</td>
	    <td>{{ session.Formation }}</td>
	    <td>{{ session.TypologieSession }}</td>
	  </tr>
	  {% endfor %}
	  </tbody>
	</table>
	
	<div class="pagination pagination-small">
		<ul>
			
			{% for p in range(1, nb_pages) %}
			<li{% if p == page %} class="active"{% endif %}>
				<a href="{{ path('Ifmia_sessionListe', {'page': p}) }}">{{ p}}</a>
			</li>
			{% endfor %}
		</ul>
	</div>
	
	</br>
	{#"#}
	{# #}
	<div >
		<a href="{{ path('Ifmia_AjouterSession') }}" class="btn" >Ajouter Session</a>
 		<a id="_edit" href="#" class="btn "  >Modifier Session </a>
		<a id="_delete" href="#" class="btn "> Supprimer Session</a>
		<a id="_annule" href="#" class="btn ">Annuler session</a>
	</div>

{% endblock %}

{% block js %}
	
	<script type="text/javascript">
	
	$(document).ready(function(){
		
		// add edit click event
		$('#_edit').click(function(e){
			var session = $('#_list td > input._select:checked');
			if($(session).length != 1) alert('Veuillez selectionner une seule session !');
			else {
				var sessionID = $(session).attr('id');
				$(this).attr('href',"{{ path('Ifmia_modifierSession') }}" + '?id=' + sessionID);
			}
		});
		
		// add delete click event
		$('#_delete').click(function(e){
			var sessions = $('#_list td > input._select:checked');
			if($(sessions).length == 0) alert('Veuillez selectionner au moin une session !');
			else {
				$(sessions).each(function(index,el){
					var sessionID = $(el).attr('id');
					$.post(
							"{{ path('Ifmia_supprimerSession') }}",
							{id : sessionID},
							function(res){
								$(el).parent()
									 .parent()
									 .remove();
								},
							'text'
							) ;
				});
			}
			// cancel the default action (navigation) of the click
			e.preventDefault();
		});

		
		
		$('#_annule').click(function(e){
			var sessions = $('#_list td > input._select:checked');
			if($(sessions).length == 0) alert('Veuillez selectionner au moin une session !');
			else {
				$(sessions).each(function(index,el){
					var sessionID = $(el).attr('id');

					$.ajax({
						url:  "{{ path('Ifmia_changeStatutAn') }}",
						type: 'post',
						dataType: 'json',
						data: {id: sessionID},
						success: function (result) {
							$('#alertMessage p').text('la session ' + result.code + ' est annulée avec succès');
							$('#alertMessage').slideDown();

						},
						error: function (error, textStatus, errorThrown) {
							$('#alertMessage p').text("une erreure s'est produite lors l'annulation de la session, ..");
							$('#alertMessage').slideDown();
						},
						complete: function (result, textStatus) {
							setTimeout(function(){
								$('#alertMessage').slideUp();
							},5000);
						}
					});
					
				});
			}
			// cancel the default action (navigation) of the click
			e.preventDefault();
		});

		$('#stateMenu > input').change(function (e) {
			var etat = $(this).val();

			$.ajax({
				url:  "{{ path('Ifmia_chercherSession') }}",
				type: 'post',
				dataType: 'json',
				data: {etat: etat},
				success: function (sessions) {
					var content = $('#_list > tbody');
					$(content).empty();
					if(sessions.length == 0){
						$('#alertMessage p').text("aucune session "+etat);
						$('#alertMessage').slideDown();
					}else{
						for ( var i = 0; i< sessions.length ; i++) {
							var row = '<tr>'+
									'<td><input id="'+sessions[i][0]+'" class="_select" type="checkbox"></td>' +
								  	'<td><a href="#">'+sessions[i][1]+'</a></td>' +
								    '<td>'+sessions[i][2]+'</td>' +
								    '<td>'+sessions[i][3]+'</td>' +
								    '<td>'+sessions[i][4]+'</td>' +
								    '<td>'+sessions[i][5]+'</td>' +
								    '<td>'+sessions[i][6]+'</td>' +
								'</tr>';
							$(content).append(row);
						}
					}

					setTimeout(function(){
						$('#alertMessage').slideUp();
					},5000);

				},
				error: function (error, textStatus, errorThrown) {},
				complete: function (result, textStatus) {}
			});
			
		});
		
	});

	
</script>
	
{% endblock %}